import React, { useState } from 'react';
import { observer, inject } from 'mobx-react';
import { Card, Button, message } from 'antd';
import styles from '../style/format.module.less';
import imgReport from '@/assets/format-1.png';
import imgNotice from '@/assets/format-2.png';
import imgBulletin from '@/assets/format-3.png';
import imgResolution from '@/assets/format-4.png';
import imgDecision from '@/assets/format-5.png';
import imgInvite from '@/assets/format-5.png';
import { StoreProps } from '../store';

const prefix = 'format';

const templates = [
  {
    key: 'report',
    name: '报告',
    img: imgReport,
  },
  {
    key: 'notice',
    name: '通知',
    img: imgNotice,
  },
  {
    key: 'bulletin',
    name: '公报',
    img: imgBulletin,
  },
  {
    key: 'resolution',
    name: '决议',
    img: imgResolution,
  },
  {
    key: 'decision',
    name: '决定',
    img: imgDecision,
  },
  {
    key: 'invite',
    name: '请示',
    img: imgInvite,
  },
  // 可继续添加更多模板
];

const Format: React.FC<StoreProps> = ({ documentStore, proofreadStore }) => {
  const [selected, setSelected] = useState('');
  const [loading, setLoading] = useState(false);

  const handleFormat = async () => {
    const editor = documentStore.editorRef?.current?.getEditor();
    if (!editor) {
      message.error('获取编辑器实例失败');
      return;
    }

    try {
      setLoading(true);
      await documentStore.formatContent({ templateId: selected });
      message.success('格式化成功');
    } catch (error) {
      message.error('格式化失败: ' + (error instanceof Error ? error.message : String(error)));
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className={styles[`${prefix}-container`]}>
      <div className={styles[`${prefix}-grid`]}>
        {templates.map(tpl => (
          <Card
            key={tpl.key}
            className={styles[`${prefix}-card`] + (selected === tpl.key ? ' ' + styles[`${prefix}-card-active`] : '')}
            hoverable
            onClick={() => setSelected(tpl.key)}
            bodyStyle={{ padding: 12, textAlign: 'center' }}
          >
            <img src={tpl.img} alt={tpl.name} className={styles[`${prefix}-img`]} />
          </Card>
        ))}
      </div>
      <div className={styles[`${prefix}-footer`]}>
        <Button
          type="primary"
          disabled={!selected}
          loading={loading}
          onClick={handleFormat}
        >
          确认选择
        </Button>
      </div>
    </div>
  );
};

export default inject('documentStore', 'proofreadStore')(observer(Format)); 